<template>
  <div>
    <div class="checkout">
      <div class="container">
        <div class="title">
          <p>Checkout</p>
        </div>
        <div class="checkout_coupon">
          <div class="coupon_info">
            <p>有优惠券？<span @click="showHide">点这里输入你的代码</span></p>
            <div class="coupon" v-show="isShow">
              <input type="text" placeholder="Coupon Code" />
              <button>APPLY COUPON</button>
            </div>
          </div>
        </div>
        <div class="customer_details">
          <div class="col-1">
            <h3>账单详情</h3>
            <input type="text" placeholder="First name" class="fname" />
            <input type="text" placeholder="Last name" class="lname" />
            <input type="text" placeholder="Company name" />
            <select>
              <option value="0">中国</option>
              <option value="1">俄罗斯</option>
            </select>
            <input type="text" placeholder="街道名称和房屋编号" />
            <input type="text" placeholder="小区,楼号,单元等(选项)" />
            <input type="text" placeholder="Town/City" />
            <select>
              <option>State</option>
              <option value="0">太原</option>
              <option value="1">北京</option>
            </select>
            <input type="text" placeholder="Postcode/ZIP" />
            <input type="tel" placeholder="Phone" />
            <input type="email" placeholder="123@qq.com" />
          </div>
          <div class="col-2">
            <h3>其他信息</h3>
            <textarea
              placeholder="可在此添加订单备注,例如：需注意的配送事项。"
            ></textarea>
          </div>
        </div>
        <div class="customer_order">
          <h3>您的订单</h3>
          <table>
            <thead>
              <tr>
                <th>产品</th>
                <th>合计</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in list" :key="item">
                <td>{{ item.name }} × {{ item.num }}</td>
                <td>
                  <span>{{ item.price }}</span>
                </td>
              </tr>
              <tr class="count">
                <td>小计</td>
                <td>
                  <span>{{ total }}</span>
                </td>
              </tr>
              <tr class="total">
                <td>合计</td>
                <td>
                  <span>{{ total }}</span>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="payment">
            <div class="payment_method">
              <p>货到付款</p>
              <p>交货时使用现金支付</p>
            </div>
            <button>下单</button>
          </div>
        </div>
      </div>
    </div>
    <footerTop></footerTop>
  </div>
</template>

<script>
import footerTop from "@/components/container/FooterTop.vue";
export default {
  components: {
    footerTop: footerTop,
  },
  data() {
    return {
      list: [
        {
          name: "杨枝甘露凉粉",
          price: "30.00",
          num: "1",
        },
      ],
      isShow:false,
    };
  },
  methods: {
    showHide() {
        this.isShow = !this.isShow
    }
  },
  computed: {
    total() {
      let price = 0;
      this.list.forEach((item) => {
        price += item.price * item.num;
      });
      return price;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 1300px;
  margin: 0 auto;
}
.checkout .title {
  height: 100px;
}
.checkout .title p {
  line-height: 100px;
  text-align: left;
  font-weight: 300;
  font-size: 18px;
}
.checkout .checkout_coupon {
  padding: 60px 0 30px;
}
.checkout .checkout_coupon .coupon_info p {
  padding: 28px 21px;
  margin-bottom: 25px;
  font-size: 13px;
  font-weight: 700;
}

.checkout .checkout_coupon .coupon_info p span:hover {
  color: #666;
  cursor: pointer;
}

.checkout .checkout_coupon .coupon_info .coupon input {
  height: 38px;
  line-height: 38px;
  border: 1px solid rgb(183, 183, 183);
  padding: 5px 13px;
  margin-right: 15px;
  background-color: #f6f6f6;
}
.checkout .checkout_coupon .coupon_info .coupon button {
  height: 38px;
  line-height: 38px;
  padding: 0 23px;
  border: 1px solid #7a5b4a;
  background-color: #7a5b4a;
  color: #fff;
}
.checkout .checkout_coupon .coupon_info .coupon button:hover {
  background-color: #fff;
  color: #7a5b4a;
}
.checkout .customer_details {
  width: 100%;
  display: flex;
}
.checkout .customer_details > div {
  flex: 1;
}
.checkout .customer_details .col-1 {
  padding-right: 10px;
}
.checkout .customer_details .col-2 {
  padding-left: 10px;
}
.checkout .customer_details h3 {
  margin: 20px 0;
  font-size: 17px;
  color: #333;
  font-weight: 300;
}
.checkout .customer_details .col-1 input {
  width: 100%;
  padding: 15px;
  border: 1px solid rgb(183, 183, 183);
  background-color: #f6f6f6;
  margin-bottom: 20px;
}
.checkout .customer_details .col-1 .fname {
  width: 48%;
}
.checkout .customer_details .col-1 .lname {
  width: 48%;
  float: right;
}
.checkout .customer_details .col-1 select {
  width: 100%;
  padding: 15px;
  border: 1px solid #ededed;
  background-color: #fff;
  color: #828282;
  margin-bottom: 20px;
  outline: none;
  cursor: pointer;
}

.checkout .customer_details .col-2 textarea {
  width: 100%;
  height: 104px;
  padding: 15px;
  border: 1px solid rgb(183, 183, 183);
  background-color: #f6f6f6;
  margin-bottom: 20px;
  resize: none;
}

.checkout .customer_order h3 {
  margin: 20px 0;
  font-size: 17px;
  color: #333;
  font-weight: 300;
}
.checkout .customer_order table {
  width: 100%;
  border-collapse: collapse;
}
.checkout .customer_order table th {
  padding: 13px 10px;
}
.checkout .customer_order table thead {
  border: 1px solid #e6e6e6;
}
.checkout .customer_order table tbody td {
  padding: 10px;
  text-align: center;
  color: #888;
  font-weight: 300;
}
.checkout .customer_order table tbody tr td span::before {
  content: "￥";
}
.checkout .customer_order table tbody .count td:first-child {
  color: #000;
}
.checkout .customer_order table tbody .total td:first-child {
  color: #7a5b4a;
}
.checkout .customer_order .payment {
  margin: 50px 0 70px;
}
.checkout .customer_order .payment .payment_method {
  border: 1px solid #e6e6e6;
  text-align: left;
  padding: 10px 20px;
  font-size: 14px;
  color: #000;
  font-weight: 300;
}

.checkout .customer_order .payment .payment_method p:first-child {
  margin-left: 10px;
}
.checkout .customer_order .payment .payment_method p:last-child {
  padding: 10px 0 0 35px;
}

.checkout .customer_order .payment button {
  margin-top: 30px;
  height: 38px;
  line-height: 38px;
  padding: 0 23px;
  border: 1px solid #7a5b4a;
  background-color: #7a5b4a;
  color: #fff;
}
.customer_order .payment button:hover {
  background-color: #fff;
  color: #7a5b4a;
}
</style>